
<template>
  <teleport to="body">
    <div
        v-if="visible"
        class="popup-menu-container"
        :style="{ top: `${position.y}px`, left: `${position.x}px` }"
        @click.stop
    >
      <div
          v-for="(item, index) in items"
          :key="index"
          class="popup-item"
          @click="handleItemClick(item)"
      >
        <span>{{ item.text }}</span>
      </div>
    </div>
  </teleport>
</template>

<script setup>

const props = defineProps({
  visible: Boolean,
  items: Array,
  position: Object
});

const emit = defineEmits(['select', 'close']);

const handleItemClick = (item) => {
  emit('select', item);
  emit('close');
};
</script>

<style scoped>
.popup-menu-container {
  position: fixed;
  min-width: 160px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 2000;
  padding: 5px 0;
}

.popup-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.popup-item:hover {
  background-color: #f5f5f5;
}
</style>
